<style scoped>
@import "../css/page5.css"; /* 引入预定义变量 */
.post-css-test {
  transform: rotateY(360deg);
  box-shadow: 0 0 3px 5px rgba(222, 222, 222, .3);
  display: flex;
  color: var(--color-main);
}
</style>

<template>
  <div class="height100">
    <div class="home-page-center single-page-center base">
      <div class="home-section-wrap page-center-wrap-bottom">
        <div class="home-section-env">
          <h1>特征提取与降维页面</h1>
          请选择高温或低温数据及要展示的维度：
          <br>

          <select id="select1" class="select1">
            <option value="1">高温</option>
            <option value="2">低温</option>
          </select>

          <el-button v-on:click="submit1()">特征提取</el-button>
          <br>
          <select id="select2" class="select2">

          </select>


          <el-button v-on:click="submit2()">绘图</el-button>


          <br><br>

          请选择降维方法：<br>
          <el-cascader :options="options_re" :props="optionProps" v-model="value_re"
                       @change="handleChange"></el-cascader>
          <el-button @click="redu()">确定</el-button>
          <br>
          <el-button @click="decision()">降维结果</el-button>
          降维得分:<p id="score"></p>
          <img style="width:500px" :src="img" class="im" id="img">
          <br>
          <br>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

var index
var select1
var select2
var select3

export default {

  data() {

    return {

      value_re: '',

      img: '',

      score: '',

      options_re:
        [
          {
            value: '0',
            label: '主成分分析算法',
            disabled: false,
          },

          {
            value: '1',
            label: '等度量算法',
            disabled: false,
          },
          {
            value: '2',
            label: '不降维',
            disabled: false,
          },
        ]
    }
  },

  methods: {

    // 填写第二个下拉框
    submit1: function () {

      // 读option
      var index = this.$route.query.idx;
      var obj = document.getElementById("select2")
      obj.options.length = 0;
      for (var i = 0; i < index.length; i++) {
        obj.options.add(new Option(index[i], i + 1));
      }

      //获取当前option
      var obj = document.getElementById("select1");
      var idx = obj.selectedIndex;
      var value = obj.options[idx].value;

      this.$axios.post('/api/post_hl_d', [value])
        .then(res => {
          this.img = 'data:;base64,' + res.data
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //读取后端图片
    submit2: function () {

      //获取当前option
      var obj1 = document.getElementById("select1");
      var idx1 = obj1.selectedIndex;
      var value1 = obj1.options[idx1].value;

      //获取当前option
      var obj2 = document.getElementById("select2");
      var idx2 = obj2.selectedIndex;
      var value2 = obj2.options[idx2].value;

      var value3 = this.value_re

      this.$axios.post('/api/submit2', [value1, value2])
        .then(res => {
          this.img = 'data:;base64,' + res.data
        })
    },

    redu: function () {
      //把high或low,维度两个参数传给后端传过去参数
      var obj1 = document.getElementById("select1");
      var idx1 = obj1.selectedIndex;
      var value1 = obj1.options[idx1].value;

      var obj2 = document.getElementById("select2");
      var idx2 = obj2.selectedIndex;
      var value2 = obj2.options[idx2].value;

      var value3 = this.value_re;

      this.$axios.post('/api/post_reduc', {
        p1: value1,
        p2: value2,
        p3: this.value_re
      })
        .then(res => {
          this.img = 'data:;base64,' + res.data
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });


    },

    decision() {
      this.$axios.post('/api/score')
        .then(function (response) {

          document.getElementById("score").innerHTML = response.data['res']

        })
    },

    show: function () {

      alert(this.value)
      this.$axios.post('/api/post_hl_d', {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}, {responseType: "arraybuffer"})
        .then(res => {
          this.img = 'data:;base64,' + res.data
        })
        .catch(function (error) {
          console.log(error);
        });

    },

  }
}
</script>
